<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        img {
            width: 300px;
            height: 300px;
        }

        ul li {
            float: left;
            width: 300px;
            text-align: center;
        }

        a {
            text-decoration: none;
        }

        .yuan {
            text-decoration: line-through;
        }

        .xian {
            color: red;
        }
    </style>
</head>

<body>
    <h1>根据数据生成一个商品列表</h1>
    <button id="btn1">根据价格排序</button>
    <button id="btn2">根据销量排序</button>
    <button id="btn3">根据评价排序</button>
    
    <div>
        <ul id="box">
            <!-- <li><img src="img/ip7.jpg" alt=""></li>
            <h4>NOTE7005</h4>
            <p>颜色:</p>
            <p>原价:</p>
            <p>现价:</p>
            <p>销量：</p>
            <p>评价：</p> -->
        </ul>
    </div>
</body>

</html>
<script>
    var data = [{
        id: '001',
        name: 'iphone7 plugs',
        imgurl: 'img/ip7.jpg',
        price: 5899.00,
        sale: 5888.00,
        color: '土豪金',
        evaluate: 288,
        sales: 1230
    }, {
        id: '002',
        name: 'Note7',
        imgurl: 'img/note7.jpg',
        price: 3899.00,
        sale: 998.00,
        color: '黑色',
        evaluate: 289,
        sales: 439
    }, {
        id: '003',
        name: '荣耀7',
        imgurl: 'img/honor7.jpg',
        price: 1999.00,
        sale: 1899.00,
        color: '白色',
        evaluate: 438,
        sales: 908
    }, {
        id: '004',
        name: 'iphone7 plugs',
        imgurl: 'img/ip7.jpg',
        price: 5999.00,
        sale: 5808.00,
        color: '土豪金',
        evaluate: 223,
        sales: 986
    }, {
        id: '005',
        name: 'Note7',
        imgurl: 'img/note7.jpg',
        price: 3892.00,
        sale: 998.00,
        color: '黑色',
        evaluate: 88,
        sales: 8798
    }, {
        id: '006',
        name: '荣耀7',
        imgurl: 'img/honor7.jpg',
        price: 1929.00,
        sale: 1099.00,
        color: '白色',
        evaluate: 2088,
        sales: 453
    }, {
        id: '007',
        name: 'iphone7 plugs',
        imgurl: 'img/ip7.jpg',
        price: 4899.00,
        sale: 2888.00,
        color: '土豪金',
        evaluate: 2880,
        sales: 88
    }, {
        id: '008',
        name: 'Note7',
        imgurl: 'img/note7.jpg',
        price: 5876.00,
        sale: 998.00,
        color: '黑色',
        evaluate: 3288,
        sales: 99
    }, {
        id: '009',
        name: '荣耀7',
        imgurl: 'img/honor7.jpg',
        price: 4999.00,
        sale: 1899.00,
        color: '白色',
        evaluate: 1288,
        sales: 645
    }, {
        id: '010',
        name: 'iphone7 plugs',
        imgurl: 'img/ip7.jpg',
        price: 5888.00,
        sale: 2899.00,
        color: '土豪金',
        evaluate: 2288,
        sales: 34
    }, {
        id: '011',
        name: 'Note7',
        imgurl: 'img/note7.jpg',
        price: 3299.00,
        sale: 978.00,
        color: '黑色',
        evaluate: 28,
        sales: 1213
    }, {
        id: '012',
        name: '荣耀7',
        imgurl: 'img/honor7.jpg',
        price: 1976.00,
        sale: 1899.00,
        color: '白色',
        evaluate: 3243,
        sales: 123
    }];

    function pingjie() {
        for (var i = 0; i < data.length; i++) {
            box.innerHTML += `<li>
            <a href="#">
            <img src="./` + data[i].imgurl + `"alt="">
            <h4>` + data[i].name + `<h4>
            <p>颜色：` + data[i].color + `</p>
            <p class="yuan">原价：` + data[i].price + `</p>
            <p class="xian">现价：` + `￥` + data[i].sale + `</p>
            <p>销量：` + data[i].sales + `</p>
            <p>评价：` + data[i].evaluate + `</p>
            </a>
        </li>`
        }
    }
    pingjie()
    btn1.onclick = () => {
        box.innerHTML = ""
        data.sort(function (a, b) {
            return a.sale - b.sale
        });
        pingjie();
    }
    btn2.onclick = () => {
        box.innerHTML = ""
        data.sort(function (a, b) {
            return a.sales - b.sales
        });
        pingjie();
    }
    btn3.onclick = () => {
        box.innerHTML = ""
        data.sort(function (a, b) {
            return a.evaluate - b.evaluate
        });
        pingjie();
    }
   
</script>